<template>
    <!-- 务必看懂下一行代码 -->
    <!-- <h2 a="1+1" :b="1 + 1" c="x" :d="x" ref="qwe"></h2> -->
    <!-- Person a="diablo" b="dd" :list="5" /> -->
    <!-- erson a="diablo" b="dd" :list="persons" /> -->
    <Person a="diablo" b="dd" />
</template>

<!-- vue3 的写法, 不带便利插件 -->
<script lang="ts">
export default {
    name: 'Person',
}
</script>

<script lang="ts" setup>
import Person from './components/Person.vue'
import { type Persons } from '@/types';
import { reactive } from 'vue'

let persons = reactive<Persons>([
    { id: '1', name: '张三', age: 18 },
    { id: '2', name: '李四', age: 19 },
    { id: '3', name: '王五', age: 20 },
])
console.log(persons)

let x = 9
</script>
<style scoped></style>